let data = [{
    // id: 1,
    code: 1,
    productName: "品如的衣柜",
    timer: new Date().toLocaleTimeString()
},
{
    // id: 2,
    code: 2,
    productName: "蔡徐坤的篮球",
    timer: new Date().toLocaleTimeString()
},
{
    // id: 3,
    code: 3,
    productName: "关羽的马",
    timer: new Date().toLocaleTimeString()
},
]
// var newdata = data.map()
// console.log(newdata);

//获取元素
let tbody = document.querySelector('tbody')
// console.log(tbody);
//创建tr
for (let i = 0; i < data.length; i++) {
    let tr = document.createElement('tr')
    // console.log(tr);
    tbody.appendChild(tr)
    //遍历每个对象
    for (k in data[i]) {
        //创建td
        let td = document.createElement('td')
        // console.log(td);
        tr.appendChild(td)
        //将内容添加到td中
        td.innerText = data[i][k]
    }
    //创建最后一个td
    let lastTd = document.createElement('td')
    tr.appendChild(lastTd)
    //创建删除按钮
    let btn = document.createElement('button')
    btn.className = 'btn'
    btn.innerText = '删除'
    lastTd.appendChild(btn)
}


//实现删除功能
let btns = document.querySelectorAll('.btn')
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode)
    }
}

//实现添加元素的功能
//获取编号的内容
let num = document.querySelector('.ipt1')
// console.log(num);
let btn = document.querySelector('button')
// console.log(btn);

//注册一个键盘点击事件
document.onkeydown = function(e){
    console.log(e.keyCode);//按下回车键后，打印出的键盘编码是13
    if(e.keyCode===13){
        key()//调用下面的点击事件
    }
}

//实现点击添加，增加一行tr
let key = btn.onclick = function () {
    //获取input元素
    let ipt1 = document.querySelector('.ipt1')
    let ipt2 = document.querySelector('.ipt2')

    let reg = /^\d{1,5}$/
    if (ipt1.value === "" || ipt2.value === "") {
        return
    }
    if (reg.test(ipt1.value)) {
        let newtr = document.createElement('tr')
        tbody.appendChild(newtr)
        for (let i = 0; i < data.length; i++) {
            let newtd = document.createElement('td')
            // console.log(newtd);
            newtr.appendChild(newtd)
        }

        let lastTd = document.createElement('td')
        newtr.appendChild(lastTd)
        //创建删除按钮
        let newbtn = document.createElement('button')
        newbtn.className = 'btn'
        newbtn.innerText = '删除'
        lastTd.appendChild(newbtn)
        tbody.lastElementChild.firstElementChild.innerText = ipt1.value
        tbody.lastElementChild.firstElementChild.nextSibling.innerText = ipt2.value
        tbody.lastElementChild.firstElementChild.nextSibling.nextSibling.innerText = new Date().toLocaleTimeString()
        var trss = document.querySelectorAll('tr')
        div.style.display = 'none'
    }

    btns = document.querySelectorAll('.btn')
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode)
            var trss = document.querySelectorAll('tr')
        }
    }


    ipt1.value = ''
    ipt2.value = ''

    // 再次实现删除功能
    let newbtns = document.querySelectorAll('.btn')
    for (let i = 0; i < newbtns.length; i++) {
        newbtns[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode)
            var trss = document.querySelectorAll('tr')
            if (trss.length === 1) {
             div.style.display = 'block'
            }
        }
    }
}
// 再次实现删除功能
let newbtns = document.querySelectorAll('.btn')
for (let i = 0; i < newbtns.length; i++) {
    newbtns[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode)
        var trss = document.querySelectorAll('tr')
        if (trss.length === 1) {
         div.style.display = 'block'
        }
    }
}


//实现搜索功能
//先获取元素
let ipt3 = document.querySelector('.ipt3')
let search =ipt3.oninput = function(){
    console.log(ipt3.value);
    //遍历所有的tr
    var trss = document.querySelectorAll('tr')
    for(let i = 1;i<trss.length;i++){
        let search = trss[i].firstElementChild.nextSibling.textContent
        console.log(search);
        if(ipt3.value===search){
            for(let i = 1; i<trss.length ;i++){
               trss[i].style.backgroundColor = ''
            }
            trss[i].style.backgroundColor = 'red'
        }
    }
}
